<template>
  <el-menu
    :style="{width: !isCollapse ? '230px' : '64px'}"
    default-active="2"
    class="aside-container"
    :class="{ 'is-collapse': isCollapse }"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
  >
    <p class="logo-lg">{{ isCollapse ? 'DIDI' : 'DIDI陪诊' }}</p>
    <TreeMenu :index='1' :menuData="menuData" :isCollapse="isCollapse" />
  </el-menu>
</template>

<script setup>
import TreeMenuVue from "./treeMenu.vue"
import { useRouter } from 'vue-router'
import { reactive, computed } from 'vue'
import { useStore } from 'vuex'

const router = useRouter()
const menuData = reactive(router.options.routes[0].children)
const store = useStore()
const isCollapse = computed(() => store.state.menu.isCollapse)

const handleOpen = () => {}
const handleClose = () => {}
</script>

<style lang="less" scoped>
.aside-container {
  height: 100%;

  .logo-lg {
    font-size: 20px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: #333;
  }

  // 在折叠状态下隐藏菜单项的文字内容
  &.is-collapse {
    .el-menu-item,
    .el-sub-menu__title {
      span {
        display: none !important;
      }
      .el-sub-menu__icon-arrow {
        display: none !important; // 隐藏子菜单的箭头图标
      }
    }
  }
}
</style>